<template v-if="visible">
    <a-modal v-model:open="visible" :title="title" @ok="handleOk">
        <a-form
            ref="formRef"
            :model="formState"
            :rules="rules"
            :label-col="{ span: 8 }"
            autocomplete="off"
            v-if="visible"
        >
            <a-form-item label="年份" name="year">
                <a-input v-model:value="formState.year" addon-after="年" />
            </a-form-item>
            <a-form-item label="脱贫人数" name="newCount">
                <a-input-number
                    v-model:value="formState.newCount"
                    style="width: 100%"
                    addon-after="人"
                />
            </a-form-item>
            <a-form-item label="贫困人数" name="oldCount">
                <a-input-number
                    v-model:value="formState.oldCount"
                    style="width: 100%"
                    addon-after="人"
                />
            </a-form-item>
            <a-form-item label="回访人数" name="back">
                <a-input-number
                    v-model:value="formState.back"
                    style="width: 100%"
                    addon-after="人"
                />
            </a-form-item>
            <a-form-item label="贫困发生率" name="incidenceRate">
                <a-input-number
                    v-model:value="formState.incidenceRate"
                    style="width: 100%"
                    addon-after="%"
                />
            </a-form-item>
            <a-form-item label="扶贫队伍人数" name="team">
                <a-input-number
                    v-model:value="formState.team"
                    style="width: 100%"
                    addon-after="人"
                />
            </a-form-item>
            <a-form-item label="贫困地区品平均收入" name="povertyIncome">
                <a-input-number
                    v-model:value="formState.povertyIncome"
                    style="width: 100%"
                    addon-after="元"
                />
            </a-form-item>
            <a-form-item label="全省农民平均收入" name="provinceIncome">
                <a-input-number
                    v-model:value="formState.provinceIncome"
                    style="width: 100%"
                    addon-after="元"
                />
            </a-form-item>

            <a-form-item label="中央拨款" name="centre">
                <a-input-number
                    v-model:value="formState.centre"
                    style="width: 100%"
                    addon-after="亿"
                />
            </a-form-item>
            <a-form-item label="自治区拨款" name="municipality">
                <a-input-number
                    v-model:value="formState.municipality"
                    style="width: 100%"
                    addon-after="亿"
                />
            </a-form-item>
            <a-form-item label="旗县区拨款" name="bannerCounty">
                <a-input-number
                    v-model:value="formState.bannerCounty"
                    style="width: 100%"
                    addon-after="亿"
                />
            </a-form-item>
            <a-form-item label="整合资金" name="mixMoney">
                <a-input-number
                    v-model:value="formState.mixMoney"
                    style="width: 100%"
                    addon-after="亿"
                />
            </a-form-item>
            <a-form-item label="其他资金" name="otherMoney">
                <a-input-number
                    v-model:value="formState.otherMoney"
                    style="width: 100%"
                    addon-after="亿"
                />
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
import type { FormInstance } from 'ant-design-vue'
import type { Ref } from 'vue'
import Lodash from 'lodash'

import { toast } from '@/utils/common'
import { Edit } from '../../store'
import type { ItemResponse } from '../../type'

const defaultFormState = {
    id: '',
    year: '',
    newCount: '',
    oldCount: '',
    back: '',
    incidenceRate: '',
    team: '',
    povertyIncome: '',
    provinceIncome: '',
    centre: '',
    municipality: '',
    bannerCounty: '',
    mixMoney: '',
    otherMoney: ''
}

export default defineComponent({
    name: 'EditDialog',
    emits: ['refresh'],

    setup(props, { emit }) {
        const state = reactive({
            visible: false,
            title: '',
            formState: Lodash.cloneDeep(defaultFormState)
        })

        const constants = {
            rules: {} as any
        }
        for (let key in defaultFormState) {
            constants.rules[key] = {
                required: true,
                message: '请输入',
                trigger: 'blur'
            }
        }
        const components = {
            formRef: ref<FormInstance>()
        } as {
            formRef: Ref<FormInstance>
        }
        const methods = {
            open(row?: ItemResponse) {
                state.title = row?.id ? '编辑' : '新增'
                if (row) {
                    state.formState = Lodash.cloneDeep(row)
                } else {
                    state.formState = Lodash.cloneDeep(defaultFormState)
                }
                state.visible = true
            },
            async handleOk() {
                const isOK = await components.formRef.value.validateFields()
                if (!isOK) return
                let params = Lodash.cloneDeep(state.formState)
                console.log(params)

                const res: any = await Edit(params)
                if (res.status === 201) {
                    toast('err', '', res.result.msg)
                    return
                }
                emit('refresh')
                state.visible = false
                toast()
            }
        }
        return {
            ...toRefs(state),
            ...methods,
            ...constants,
            ...components
        }
    }
})
</script>
